<template>
	<view class="w-full h-full">
		<u-search
			placeholder="请输入停车场名称关键词" 
			clearabled
			:show-action="false"
			placeholder-color="#B9C4D5"
			search-icon-color="#B9C4D5"
			bg-color="#FFFFFF"
			@search="handleSearch"
		></u-search>
		<view class="item mt-30 flex-column" v-for="(item,index) in monthOrderList" :key="index" @click="hanleDetail(item)">
				<view class="flex-between align-center">
					<view>
						<image src="../../../static/my/car-number.png"></image>
						<text class="num ml-10">{{item.plate.replace(/,/g, "")}}</text>
					</view>
					<view class="day-box" :class="[item.status === 0 || item.status === -1 ? 'gary' : 'blue']">
						{{ statusText(item.status) }}
					</view>
				</view>
				<view class=" flex align-center ml-40" v-for="(i,v) in item.orderGoods" :key="i.id">
					<text class="value">P{{v+1}}:{{i.parkName || '-'}}</text>
				</view>
				<view class="flex align-center ml-40">
					<text class="time">{{item.startTime}} 至 {{item.endTime}}</text>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			monthOrderList: {
				type: Array,
				default: () => []
			}
		},
		data () {
			return {
			}
		},
		computed: {
			statusText () {
				return (status) => {
					return {
						0:'待支付',
						1:'已支付',
						2:'支付失败',
						'-1':'订单取消',
					}[status]
				}
			}
		},
		methods: {
			hanleDetail (item) {
				uni.navigateTo({
					url: `/pagesA/pages/place-an-order/index?id=${item.orderNo}`,
				})
			},
			handleSearch (val) {
				this.$emit('getMyMonthOrder', { parkName: val})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		min-height: 225rpx;
		border-radius: 30rpx;
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		& > view{
			height: 30px;
		}
		image{
			width: 30rpx;
			height: 30rpx;
			position: relative;
			top: 2px;
		}
		.num{
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: #222222;
		}
		.value{
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 39.2rpx;
			color: #222222;
		}
		.time{
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36.4rpx;
			color: #919EB5;
		}
		.day-box{
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
		}
		.gary{
			color: #919EB5;
		}
		.blue{
			color: #3A67D5;
		}
	}
</style>